<template>
	<view class="pics">
		<scroll-view scroll-y class="left">
			<view @click="choosePicIndex(index,item.id)" :class="chooseIndex===index?'active':''" class="item" v-for="(item,index) in picsList" :key="item.id">{{item.title}}</view>
		</scroll-view>
		<scroll-view scroll-y class="right">
			<view v-for="item in imgInfo" :key="item.id">
				<image :src="item.img_url" @click="preImg(item.img_url)"></image>
				<text>{{item.title}}</text>
			</view>
			<view v-if="imgInfo.length===0">没有数据</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgInfo:[],
				picsList:[],
				chooseIndex:0
			};
		},
		onLoad() {
			//this.getImgInfo()
			this.getPicsList()
		},
		methods:{
			async getPicsList(){
				const res = await this.$request({url:"/api/getimgcategory"})
				this.picsList=res.data.message
			},
			async getImgInfo(id){
				const res =await this.$request({url:"/api/getimages/"+id})
				this.imgInfo=res.data.message
			},
			choosePicIndex(index,id){
				this.chooseIndex=index
				this.getImgInfo(id)
			},
			preImg(current){
				const urls = this.imgInfo.map(v=>{
					return v.img_url
				})
				uni.previewImage({
					urls,
					current
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
.pics{
	display: flex;
	height: 100%;
	.left{
		width: 200rpx;
		height: 100%;
		border-right: 1px solid #ccc;
		.item{
			font-size: 15px;
			width: 100%;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			border-bottom: 1px solid #eee;
		}
		.active{
			background-color: $color;
			color: #fff;
		}
	}
	.right{
		width: 520rpx;
		height: 100%;
		margin: 10px auto;
		image{
			border-radius: 5px;
		}
		text{
			font-size: 15px;
		}
	}
}
</style>
